<!--
 * @Author: your name
 * @Date: 2020-10-15 10:07:44
 * @LastEditTime: 2021-02-22 14:20:49
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\components\home\ProductSwiper.vue
-->
<template>
  <div class="ProductSwiper mb70 s12">
    <h3 class="ProductSwiper_title ptb20">{{title}}</h3>
    <div style="position: relative" v-show="isClient">
      <div v-swiper:ProductSwiper="swiperOption">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item, index) of productData"
            :key="'swiper' + index"
            ref="swiperSlide"
          >
            <div class="ProductSwiper_box pt20 pb20" data-box="box" :data-item="item">
              <ul class="boxImg" ref="li_ul">
                <template v-if="item.child && item.child.length">
                  <li
                    ref="li_img"
                    class="li liImg"
                    :class="{ productActive: i === 0 }"
                    v-for="(img, i) of item.child"
                    :key="'img' + i"
                  >
                    <nuxt-link :to="'/productDetail?id=' + item.entity_id">
                      <img class="img" :src="img.image" alt="" />
                    </nuxt-link>
                  </li>
                </template>
              </ul>
              <div class="content">
                <h3 class="content_title ptb10">{{ item.name }}</h3>
                <ul class="content_ul" ref="li_radio">
                  <template v-if="item.child && item.child.length">
                    <li
                      ref="li_option"
                      :class="{ optionAcitve: j === 0 }"
                      class="li liRadio"
                      @click="tabPrice(option)"
                      v-for="(option, j) of item.child"
                      :key="'option' + j"
                    >
                      <span :style="{backgroundColor:option.color}" :data-index="(j + 1)" class="img block"></span>
                    </li>
                  </template>
                </ul>
                <div class="content_price ptb10">
                  <span class="price">
                      {{$t('$')}} {{ curPrice ? curPrice : parseFloat(item.child[0].origin_price).toFixed(2)}}
                      <div class="finalPrice"
                        v-if="!finalPrice && parseFloat(item.child[0].origin_price).toFixed(2) !== parseFloat(item.child[0].final_price).toFixed(2)">
                        {{$t('$')}} {{parseFloat(item.child[0].final_price).toFixed(2)}}
                      </div>
                      <div v-if="finalPrice" class="finalPrice">{{$t('$')}} {{ finalPrice }}</div>                     
                  </span>
                  <div class="addFavorite">
                    <i data-index="0" class="iconfont icon-aixin1"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-button-prev" :class="_class" slot="button-prev"></div>
      <div class="swiper-button-next" :class="_class" slot="button-next"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProductSwiper",
  data() {
    return {
      isClient: false,
      finalPrice: 0,
      curPrice: 0
    }
  },
  props: {
    swiperOption: {
      type: Object,
      default: () => {},
    },
    productData: {
      type: [Array, Object],
      default: () => [],
    },
    title: {
      type: String,
      default: 'title'
    },
    _class: {
      type: String,
      default: ''
    }
  },
  methods: {
    /**
     *@param: 
     *@description: 切换产品价格
     *@author: Mister Wang
     *@date: 2021-01-18 10:14:45
    */
    tabPrice(item) {
      let originPrice = item.origin_price
      let finalPrice = item.final_price
      this.curPrice = parseFloat(originPrice).toFixed(2)
      finalPrice = parseFloat(finalPrice).toFixed(2)
      if(this.curPrice !== finalPrice) {
        this.finalPrice = finalPrice
      }
    }
  },
  computed: {
    // ProductSwiper() {
    //   return this.$refs.ProductSwiper.swiper()
    // }
  },
  mounted() {
    this.isClient = true;
  }
};
</script>

<style lang="scss" scoped>
@import "~/assets/scss/index.scss";
.ProductSwiper {
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
  .swiper-container {
    width: 1100px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .swiper-wrapper {
    box-sizing: border-box;
  }
  &_title {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
  }
  &_box {
    border: 1px solid $ddd;
    overflow: hidden;
    cursor: pointer;
    &:hover {
      .addFavorite {
        display: block !important;
      }
    }
  }
  .boxImg {
    position: relative;
    height: 150px;
    .li {
      position: absolute;
      left: -$s100;
      top: 0;
      width: $s100;
      height: $s100;
      .img {
        width: $s100;
        height: $s100;
      }
    }
  }
  .content {
    &_title {
      text-align: center;
      font-size: 16px;
      font-weight: bold;
    }
    &_ul {
      @include flex-center(center);
      .li {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 1px solid $ddd;
        padding: 3px;
        cursor: pointer;
        margin-right: 5px;
        background: rgba(255, 255, 255, 0.1);
        .img {
          width: $s100;
          height: $s100;
          border-radius: 50%;
          vertical-align: unset !important;
        }
        &:last-child {
          margin-right: 0;
        }
      }
    }
    &_price {
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      position: relative;
      .price {
        position: relative;
        text-align: center;
        .finalPrice {
          position: absolute;
          right: -50px;
          top: 0;
          font-size: 14px;
          font-weight: bold;
          color: $theme;
        }
      }
      .addFavorite {
        position: absolute;
        right: 30px;
        top: 10px;
        display: none;
      }
    }
  }
}
.productActive {
  left: 0 !important;
  transition: all 0.5s;
}
.optionAcitve {
  border: 1px solid $c000 !important;
}
.swiper-button-prev {
  background: url("../../assets/image/prev-btn.png")
    no-repeat;
  background-size: $s100 $s100;
  background-position: 50% 50%;
  width: 24px;
  height: 24px;
  outline: none;
}
.swiper-button-next {
  background: url("../../assets/image/next-btn.png")
    no-repeat;
  background-size: $s100 $s100;
  background-position: 50% 50%;
  padding: 0;
  width: 24px;
  height: 24px;
  outline: none;
}
</style>